/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:张谦
 */

import React, {FC} from "react";
import {SysUserModel} from "@/pages/sys/user/data";
import userRoleMapService from "@/pages/sys/userRoleMap/service";
import styles from "@/pages/sys/role/components/Authorize.less";
import RoleDetails from "@/pages/sys/role/components/Details";
import useDialog from "@/hooks/useDialog";
import useLoad from "@/hooks/useLoad";

const HaveRole: FC<{ primaryKey: string }> = props => {
  const detailsOperate = useDialog();
  const {primaryKey} = props;
  const {data: members = []} = useLoad<SysUserModel[]>({
    isLoad: Boolean(primaryKey),
    onLoad: () => userRoleMapService.selectMapRoleList(primaryKey)
  }, [primaryKey]);

  return (
    <>
      <div>
        {members.length ? (
          <ul className={styles.uiK}>
            {members.map(p => <a key={p.id} onDoubleClick={() => detailsOperate.show({id: p.id})}>
              <li className={styles.liCard} key={p.id}>{p.name}</li>
            </a>)}
          </ul>) : (
          <div className={`${styles.alert} ${styles.warning} ${styles.margin} ${styles.padding}`}>未拥有任何角色</div>)}
      </div>
      <RoleDetails {...detailsOperate}/>
    </>
  )
}

export default HaveRole;
